<!-- 个人中心 -->
<template>
	<view class="contain" style="">
		<view class="shangbox" style="background: #DF311C;border-radius: 24rpx;">
			<view class="commission_box">
				<view class="tixian" @click="toWithdrawal()">提现</view>
				<view style="display: flex;flex-direction: column;height: 100%;justify-content: space-between;">
					<view style="display: flex;">
						<view class="title">总收益（元）</view>
						<view style="margin-left: 20rpx;">
							<image style="width: 32rpx;height: 22rpx;" src="../../static/image/fenxiao36.png"> </image>
						</view>
					</view>
					<view class="money1">{{dataInfo.profit_money?dataInfo.profit_money:0}}</view>
					<view class="br"></view>
					<view style="display: flex;">
						<view style="flex: 1;">
							<view class="title"> 待入帐佣金</view>
							<view class="money2"> {{dataInfo.amount_sum?dataInfo.amount_sum:0}}</view>
						</view>
						<view style="flex: 1.5;">
							<view class="title"> 可提现佣金</view>
							<view class="money2"> {{dataInfo.money?dataInfo.money:0}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="commission_box2">

			<view style="display: flex;font-size: 28rpx;font-weight: 400;">
				<view>全部</view>
				<view>￥{{allmoney}}</view>
			</view>
		</view>
		<view>
			<uni-datetime-picker @change="datetimechange" v-model="datetimerange" type="datetimerange"
				rangeSeparator="至" />
		</view>
		<view class="title_box">
			<view @click="clickItem(item)" v-for="(item, i) in titleList" :key="i">
				<view style="position: relative;display: flex;">
					<view class="dian" v-if="handleitem==item"></view>
					<view :class="item==handleitem?'yname':'noname'">{{item}}</view>
				</view>
			</view>
		</view>
		<view class="order-list" v-if="orderData.length>0">
			<view v-for="(item, i) in orderData" :key="i">
				<view class="list-item">
					<view style="flex: 1;">
						<image style="width: 66rpx;height: 66rpx;" :src="(item.avatar)"></image>
					</view>
					<view style="margin-left: 30rpx;flex: 4;">
						<view style="display: flex;justify-content: space-between;">
							<view class="list-name">{{item.nickname}}</view>
						</view>
						<view class="list-bottom">
							<view>{{item.createtime}}</view>
						</view>
					</view>
					<view class="money-c">+{{item.money}}</view>
				</view>

			</view>

		</view>
		<view class="dibu">
			<view class="heng"> </view>
			<view class="gengduo"> 没有更多了 </view>
			<view class="heng"> </view>
		</view>
		<view class="zanwubox" v-if="commissionList.length==0">
			<view>
				<image style="width: 261rpx;height: 175rpx;" src="../../static/image/fenxiao21.png"></image>
			</view>
			<view class="zhanwu">暂无数据</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				allmoney: 0,
				datetimerange: [],
				dataInfo: {

				},
				date: currentDate,
				single: '',
				handleitem: '全部',
				// titleList: [
				// 	"全部", "已计入", "已退回", "已取消"
				// ],
				titleList: [
					"全部"
				],
				commissionList: [{
					id: 0,
					name: "For",
					time: "2022.03.30",
					image: require('../../static/image/fenxiao32.png'),
					money: '+2.00'
				}, {
					id: 1,
					name: "For",
					time: "2022.03.30",
					// image: require('../../static/image/fenxiao33.png'),
					money: '+2.00'
				}],
				orderData: {}
			};
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		mounted() {
			var date1 = new Date(new Date(new Date().toLocaleDateString()).getTime());
			var date2 = new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1);
			var startTime = date1.getFullYear() + "-" + ((date1.getMonth() + 1) < 10 ? "0" + (date1.getMonth() + 1) : (
					date1.getMonth() + 1)) + "-" + (date1.getDate() < 10 ? "0" + date1.getDate() : date1.getDate()) + " " +
				(date1.getHours() < 10 ? "0" + date1.getHours() : date1.getHours()) + ":" + (date1.getMinutes() < 10 ?
					"0" + date1.getMinutes() : date1.getMinutes()) + ":" + (date1.getSeconds() < 10 ? "0" + date1
					.getSeconds() : date1.getSeconds());
			var endTime = date2.getFullYear() + "-" + ((date2.getMonth() + 1) < 10 ? "0" + (date2.getMonth() + 1) : (date2
				.getMonth() + 1)) + "-" + (date2.getDate() < 10 ? "0" + date2.getDate() : date2.getDate()) + " " + (
				date2.getHours() < 10 ? "0" + date2.getHours() : date2.getHours()) + ":" + (date2.getMinutes() < 10 ?
				"0" + date2.getMinutes() : date2.getMinutes()) + ":" + (date2.getSeconds() < 10 ? "0" + date2
				.getSeconds() : date2.getSeconds());
			this.datetimerange.push(startTime)
			this.datetimerange.push(endTime)
			this.getData()
			this.getOrderData()
		},
		methods: {
			datetimechange(e) {
				console.log('2', e)
				this.datetimerange[0] = e[0]
				this.datetimerange[1] = e[1]
				this.getOrderData()
			},
			getData() {
				let that = this
				that.$api.withdrawal({}).then(res => {
					console.log('res', res)
					if (res.code == 1) {
						that.dataInfo = res.data
						console.log('11', that.dataInfo)
					}
				});
			},
			getOrderData() {
				let that = this
				var str_time = ''
				var end_time = ''
				if (that.datetimerange.length > 0 && that.datetimerange != null) {
					str_time = that.datetimerange[0]
					end_time = that.datetimerange[1]
				}
				that.$api.orderData({
					// str_time: str_time,
					// end_time: end_time
				}).then(res => {
					console.log('res', res)
					if (res.code == 1) {
						that.orderData = res.data.list
						that.allmoney = res.data.sum_money
						console.log('11', that.orderData)
					}
				});
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			bindDateChange: function(e) {
				this.date = e.detail.value
			},

			clickItem(val) {
				console.log("111", val)
				this.handleitem = val
			},
			toWithdrawal() {
				uni.navigateTo({
					url: '/pages/distribution/withdrawal'
				})
			}
		}
	};
</script>
<style>
	page {
		background: #F5F5F5;

	}
</style>
<style lang="scss" scoped>
	* {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}

	.example-body {
		background-color: #fff;
		padding: 10px;
	}

	.shangbox {
		background-image: url('https://huboshizb.bigchun.com/uploads/20220912/ddd24dbfaf7070df5c54ebe4f08771b3.png');
	}

	.contain {
		padding-top: 28rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
	}

	.commission_box {
		background-size: 100% 100%;
		// width: 336rpx;
		height: 298rpx;
		background-image: url('https://huboshizb.bigchun.com/uploads/20220912/ddd24dbfaf7070df5c54ebe4f08771b3.png');
		padding: 43rpx 50rpx 32rpx 50rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		position: relative;

	}

	.commission_box2 {
		display: flex;
		justify-content: space-between;
		margin-top: 50rpx;
		align-items: center;
	}

	.commission-xuan {
		width: 242rpx;
		height: 64rpx;
		background: #FFFFFF;
		border-radius: 32rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.commission-jiantou {
		background-size: 100% 100%;
		width: 30rpx;
		height: 17rpx;
		background-image: url('/static/image/fenxiao31.png');
	}

	.tixian {
		position: absolute;
		top: 16rpx;
		right: 36rpx;
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #FFFFFF;
	}

	.order_box {
		display: flex;
		justify-content: space-between;

	}

	.order_br {
		border: 1rpx solid #FFFFFF;
		opacity: 0.38;
	}

	.name1 {
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
	}

	.money1 {
		font-size: 36rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #FFFFFF;

	}

	.name2 {
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
	}

	.money2 {
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #FFFFFF;
		margin-top: 18rpx;
	}

	.zhanwu {
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #999999;
	}

	.zanwubox {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-top: 200rpx;
	}

	.order-list {
		// margin-left: 30rpx;
		// margin-right: 30rpx;
		margin-top: 36rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		padding-left: 30rpx;
		padding-top: 20rpx;
		padding-right: 30rpx;
	}

	.list-item {
		display: flex;
		border-bottom: 1px solid #eeeeee;
		margin-top: 30rpx;

	}

	.list-name {
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #333333;
	}

	.list-dengji {
		background-size: 100% 100%;
		width: 136rpx;
		height: 36rpx;
		background-image: url('/static/image/fenxiao20.png');
		text-align: center;
		font-size: 26rpx;
		font-weight: 400;
		color: #FFFFFF;
		margin-left: 16rpx;
	}

	.list-bottom {
		display: flex;
		margin-top: 18rpx;
		margin-bottom: 36rpx;
		font-size: 26rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #999999;
		justify-content: space-between;
	}

	.chengyuan {
		margin-left: 30rpx;
	}

	.num {
		margin-left: 10rpx;
	}

	.order-xuan {
		width: 242rpx;
		height: 64rpx;
		background: #FFFFFF;
		border-radius: 32rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.jiantou {
		background-size: 100% 100%;
		width: 30rpx;
		height: 17rpx;
		background-image: url('/static/image/fenxiao31.png');
	}

	.title_box {
		display: flex;
		// justify-content: space-around;
		margin-top: 33rpx;
		margin-left: 10px;
	}

	.dian {
		background-size: 100% 100%;
		width: 35rpx;
		height: 35rpx;
		background-image: url('/static/image/fenxiao26.png');
		position: absolute;
		top: -5px;
		left: -7px;
	}

	.noname {
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #333333;
		z-index: 9;
		width: 100rpx;
	}

	.yname {
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #333333;
		// position: absolute;
		width: 100rpx;
		left: 20rpx;
		top: 0rpx;
		z-index: 9;
	}

	.list-money {
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #F16009;
	}

	.money-c {
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #F16009;
	}

	.title {
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
	}

	.br {
		height: 1px;
		background: #FFFFFF;
		opacity: 0.33;
	}

	.heng {
		width: 98rpx;
		height: 1px;
		background: #CCCCCC;
	}

	.dibu {
		display: flex;
		margin-top: 30rpx;
		align-items: center;
		justify-content: center;
	}

	.gengduo {
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #CCCCCC;
		margin-left: 30rpx;
		margin-right: 30rpx;
	}
</style>